const view_root =
{
    template: 
`<div style="width: 100%; height: 100%;">
    <div class="ma-2">
        <div class="my-2">
            <el-button type="primary" icon="el-icon-view" @click="btnDecode">decode ( ascii -> 汉 )</el-button>
            <el-button type="danger" icon="el-icon-lock" @click="btnEncode">encode ( 汉 -> ascii )</el-button>
        </div>
        <div class="my-2">
            输入:
        </div>
        <el-input
            type="textarea"
            :rows="8"
            placeholder="请输入内容"
            v-model="mInput"></el-input>
        <div class="my-2">
            输出:
            <el-button type="success" icon="el-icon-document-copy" @click="btnCopyOutput">拷贝输出内容</el-button>
        </div>        
        <el-input
            type="textarea"
            :rows="8"
            readonly
            v-model="mOutput"></el-input>
    </div>    
</div>`,
    data: function ()
    {
        return {            
            mInput: ``,
            mOutput: ``,
        };
    },
    methods: {
        btnEncode() {
            this.mOutput = he.encode(this.mInput);
        },
        btnDecode() {
            this.mOutput = he.decode(this.mInput);
        },
        btnCopyOutput: async function () {
            await navigator.clipboard.writeText(this.mOutput);
        },
    }
};